
<html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    *{ margin:0; padding:0; font-size:14px}
    #box{ width:500px; margin:100px auto}
    table,th,td{ border:1px solid #000; border-collapse:collapse}
    td,th{ width:100px; height:30px; padding:10px}
    input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
    tbody tr td:first-child{text-align: center;}
    tfoot td{text-align: right;}
    .editBtn{ color:#666}
    .delBtn{ color:red}
    .okBtn,.cancelBtn{ display:none}
    
    .edit span{ display:none}
    .edit input[type="text"]{ display:inline-block}
    .edit .editBtn,.edit .delBtn{ display:none}
    .edit .okBtn,.edit .cancelBtn{ display:inline}
    </style>
    
    </head>
    
    <body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span>18</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a>
                    </td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>李四</span><input type="text"></td>
                    <td><span>25</span><input type="text"></td>
                    <td><span>2</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a> 
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小强</span><input type="text"></td>
                    <td><span>22</span><input type="text"></td>
                    <td><span>3</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a> 
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小明</span><input type="text"></td>
                    <td><span>16</span><input type="text"></td>
                    <td><span>4</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                         <a href="javascript:;" class="cancelBtn">取消</a>
                         <a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">总价：￥<b id="money"></b></td>
                </tr>
            </tfoot>
       </table>
    </div>
    
    <script>
    var editBtns = document.querySelectorAll('.editBtn');
    var okBtns = document.querySelectorAll('.okBtn');
    var cancelBtns = document.querySelectorAll('.cancelBtn');
    var delBtns = document.querySelectorAll('.delBtn');
  
    Array.from(editBtns).forEach(function(editBtn){
        editBtn.onclick = function () {
        var tr = this.parentNode.parentNode;
        tr.classList.add('edit');
        var spans = document.querySelectorAll('span')
        for(var i = 0; i < spans.length; i++){
        spans[i].nextElementSibling.value = spans[i].innerHTML;
        }    
        }
    })
    
    Array.from(okBtns).forEach(function(okBtn){
        okBtn.onclick = function () {
        var tr = this.parentNode.parentNode;
        tr.classList.remove('edit');
        var spans = document.querySelectorAll('span')
        for(var i = 0; i < spans.length; i++){
        spans[i].innerHTML = spans[i].nextElementSibling.value;
        }    
        }
    })

      // TODOS：取消和删除
        
      Array.from(cancelBtns).forEach(function(cancelBtn){
        cancelBtn.onclick = function () {
        var tr = this.parentNode.parentNode;
        tr.classList.remove('edit');
        
        }    
        
    })

    Array.from(delBtns).forEach(function(delBtn){
        delBtn.onclick = function () {
        var tr = this.parentNode.parentNode;
        if(confirm('确定删除？')){
                tr.remove()
               }
        }    
        
    })
    </script>
    </body>
    </html>
    